<!--
 * @Author: wuzhen
 * @Date: 12-07 15:59:20
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-11 14:43:00
 * @Description: 监控页
 -->
<template>
  <div class="monitor" ref="page">
    <Row :gutter="20">
      <Col :span="6" v-for="(item, index) in infoData" :key="index" style="height: 120px;padding-bottom: 10px">
      <infor-card :color="item.color" :icon="item.icon" :icon-size="60">
        <count-up :end="item.count" count-class="count-style"></count-up>
        <p style="font-size:16px">{{ item.title }}</p>
      </infor-card>
      </Col>
    </Row>
    <Row :gutter="15" style="margin-top: 15px;">

      <Col span="24">
      <Card dis-hover>
        <Tabs type="card" style="overflow:visible" @on-click="changeType">
          <TabPane v-for="tab in tabTypes" :key="tab" :label="tab"></TabPane>
          <div slot="extra">
            <Select v-model="dateChoice" style="width:100px" @on-change="changeDate" size="small">
              <Option v-for="item in dateType" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <span style="margin-left: 15px;color:#999" v-if="dateChoice!==0">{{dateTxt}}</span>
            <DatePicker v-model="dateCustom" type="daterange" placement="bottom-end" placeholder="" style="width: 200px;margin-left:15px" v-else></DatePicker>
          </div>
        </Tabs>
        <ve-line :data="veData" :toolbox="toolbox" :data-zoom="dataZoom" :extend="extend" :colors="colors" ref="chart" height="600px"></ve-line>
      </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import { getmonitorData, getmonitorOnline } from "@/request/api";
const start = new Date();
const end = new Date();
export default {
  data() {
    this.colors = ["#2d8cf0"];
    this.dataZoom = [
      {
        type: "slider",
        start: 0,
        end: 100,
        show: false
      },
      {
        type: "inside",
        start: 0,
        end: 100
      }
    ];
    this.extend = {
      "xAxis.0.axisLabel.rotate": -45,
      series: {
        barWidth: 15,
        label: {
          show: true
        },
        smooth: false
      }
    };
    this.orderDataSettings = {
      showLine: ["下单用户"]
    };
    this.toolbox = {
      show: true,
      feature: {
        magicType: { type: ["line", "bar"] },
        saveAsImage: {}
      }
    };
    return {
      infoData: [],
      // 搜索参数配置
      searchProps: [
        {
          label: "日期范围",
          type: "daterange",
          key: "created_at",
          placeholder: "请输入日期范围查询"
        }
      ],
      dateChoice: 30,
      dateTxt: `${this.$fmtMoment(
        new Date().setTime(start.getTime() - 3600 * 1000 * 24 * 29),
        "YYYY-MM-DD"
      )}至${this.$fmtMoment(end, "YYYY-MM-DD")}`,
      dateCustom: [],
      dateType: [
        {
          label: "最近7天",
          value: 7
        },
        {
          label: "最近15天",
          value: 15
        },
        {
          label: "最近30天",
          value: 30
        }
        // {
        //   label: "最近90天",
        //   value: 90
        // },
        // {
        //   label: "最近半年",
        //   value: 183
        // },
        // {
        //   label: "最近一年",
        //   value: 365
        // },
        // {
        //   label: "自定义",
        //   value: 0
        // }
      ],
      // "用户在线统计"
      tabTypes: ["用户注册统计", "活跃用户统计", "单聊统计", "建群统计"],
      typeIndex: 0,
      veData: {
        columns: ["日期", "用户注册数"],
        rows: []
      },
      regData: {
        columns: ["日期", "用户注册数"],
        rows: []
      },
      userData: {
        columns: ["日期", "活跃用户数"],
        rows: []
      },
      msgData: {
        columns: ["日期", "聊天次数"],
        rows: []
      },
      groupData: {
        columns: ["日期", "建群数"],
        rows: []
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.$refs[`chart`].echarts.resize();
      }, 200);
    });
    this.$bus.$on("changeCollapsed", () => {
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs[`chart`].echarts.resize();
        }, 200);
      });
    });
    this.getData();
  },
  methods: {
    async getData() {
      try {
        const res = await getmonitorData();
        const data = res.result;
        this.infoData = [
          {
            title: "今日注册用户",
            icon: "md-person-add",
            count: data.totalreg,
            color: "#2d8cf0"
          },
          {
            title: "注册用户总数",
            icon: "ios-people",
            count: data.totaluser,
            color: "#ff9900"
          },
          {
            title: "当前群组总数",
            icon: "md-chatbubbles",
            count: data.totalgroup,
            color: "#E46CBB"
          },
          {
            title: "单聊消息总数",
            icon: "ios-chatbubbles",
            count: data.totalmsg,
            color: "#722ed1"
          }
        ];
        this.getmonitorOnlineData();
      } catch (error) {
        throw error;
      }
    },
    async getmonitorOnlineData() {
      try {
        const res = await getmonitorOnline({ date: this.dateChoice });
        const data = res.result;
        this.regData.rows = data.regList
          .map(v => {
            return {
              日期: v[0],
              用户注册数: v[1]
            };
          })
          .reverse();
        this.userData.rows = data.userList
          .map(v => {
            return {
              日期: v[0],
              活跃用户数: v[1]
            };
          })
          .reverse();
        this.msgData.rows = data.msgList
          .map(v => {
            return {
              日期: v[0],
              聊天次数: v[1]
            };
          })
          .reverse();
        this.groupData.rows = data.groupList
          .map(v => {
            return {
              日期: v[0],
              建群数: v[1]
            };
          })
          .reverse();
        this.changeType(this.typeIndex);
      } catch (error) {
        throw error;
      }
    },
    changeDate(e) {
      this.dateChoice = e;
      if (e) {
        const date = new Date().setTime(
          start.getTime() - 3600 * 1000 * 24 * (e - 1)
        );
        this.dateTxt = `${this.$fmtMoment(
          date,
          "YYYY-MM-DD"
        )}至${this.$fmtMoment(end, "YYYY-MM-DD")}`;
        this.dateCustom = [
          this.$fmtMoment(date, "YYYY-MM-DD"),
          this.$fmtMoment(end, "YYYY-MM-DD")
        ];
      }
      this.getmonitorOnlineData();
    },
    changeType(e) {
      const types = ["regData", "userData", "msgData", "groupData"];
      this.typeIndex = e;
      this.veData = this[types[e]];
    }
  }
};
</script>

<style lang="less">
.monitor {
  .count-style {
    font-size: 50px;
  }
}
</style>